<template>
  <div class="vacation">
    <p>周末去哪儿</p>
    <ul class="vacation-list">
      <li class="vacation-item" v-for="item in vacationList" :key="item.id">
        <div class="vacation-item-img">
          <img :src="item.imgUrl" :alt="item.title">
        </div>
        <p class="title">{{ item.title }}</p>
        <p class="text">{{ item.text }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
  export default{
    props:['vacationList']
  }
</script>
<style scoped>
  .vacation>p{
    color: #212121;
    padding: .3rem 0 .3rem .26rem;
  }
  .vacation-list{
    background-color: #fff;
  }
  .vacation-item-img{
    width: 100%;
    height: 0;
    padding-bottom: 3rem;
    background-color: #eee;
  }
  .vacation-item-img img{
    width: 100%;
    height: 3rem;
  }
  .title{
    font-size: .28rem;
    color:#212121;
    padding: .2rem;
  }
  .text{
    font-size: .24rem;
    color: #616161;
    padding: 0 0 .4rem .2rem;
  }
</style>
